@import '../global/global';

$list-spacing: $ring-unit / 2;

.ring-list {
  position: relative;

  z-index: 1;

  line-height: normal;

  border-radius: $ring-border-radius;
}

.ring-list__i {
  overflow: auto;
}

.ring-list__item_scrolling {
  pointer-events: none;
}

.ring-list__separator {
  display: block;
  border-top: 1px solid #E5E5E5;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: $ring-unit/2 $ring-unit*2 0 $ring-unit*2;

  color: #ADADAD;
  @include ring-font;
  font-size: $ring-font-size-smaller;
  text-align: right;

  &_first {
    margin-top: 0;
    padding-top: 0;
    border: none;
  }

  &_empty {
    padding-top: 0;
  }
}

.ring-list__item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 0 $ring-unit*2;

  font-size: $ring-font-size;
  line-height: $ring-unit*3;
  text-align: left;

  outline: none;
  vertical-align: bottom;
  text-decoration: none;

  white-space: nowrap;

  &_error {
    color: #F00;
    cursor: default;

    // Redefine ring-link
    &:hover, &:focus, &:visited {
      color: #F00;
    }
  }

  &_add {
    line-height: 3.5*$ring-unit;

    .ring-list__plus {
      font-size: 3*$ring-unit;
      margin-right: $ring-unit;
      margin-top: -$ring-unit;
    }
  }

  &__top {
    display: flex;
    flex-direction: row;
  }

  &__left {
    flex-shrink: 0;
  }

  &__label {
    flex-grow: 1;
    flex-shrink: 1;
    @include ring-ellipsis;
    text-align: left;

    padding-right: $ring-unit * 2;
  }

  &__description {
    flex-shrink: 100;
    text-align: right;

    @include ring-font;
    @include ring-ellipsis;

    color: $ring-dark-gray-color;
    font-size: $ring-font-size-smaller;

    .ring-list__item_hover & {
      color: #FFF;
    }
  }

  &__right {
    flex-shrink: 0;
  }

  &__details {
    color: $ring-dark-gray-color;
    white-space: normal;
    line-height: $ring-unit*2;
    font-size: 12px;
    margin-bottom: 6px;

    &_padded {
      margin-left: 20px;
    }

    .ring-list__item_hover & {
      color: #FFF;
    }
  }
}

// Redefine :last-child
.ring-list__item_hint.ring-list__item_hint {
  font-size: $ring-font-size-smaller;
  background-color: #FFF5CD;
  border-top: 1px solid #E5DCB8;
  margin-bottom: 0;
}

.ring-list__item_action {
  cursor: pointer;
  color: $ring-text-color;

  &.ring-list__item_hover:not(.ring-list__item_error) {
    color: #FFF;
    background-color: $ring-blue-color;

    .ring-list__highlight, .ring-list__service {
      color: inherit;
    }
  }
}

.ring-list__icon {
  display: block;
  margin: $ring-unit/2 0 0 $ring-unit*2;
  width: $ring-unit*2;
  height: $ring-unit*2;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ring-list__highlight {
  color: #D800FF;
}

.ring-list__service {
  color: #B4B4B4;
}

.ring-list__glyph {
  position: relative;
  margin-right: $ring-unit;
  top: -2px;
  width: 20px;
  float: left;

  color: $ring-dark-gray-color;

  &_hidden {
    visibility: hidden;
  }

  &_right {
    float: right;
    margin-right: 0;
    margin-left: $ring-unit * 2;
  }

  &_checkbox {
    margin-right: 0;
  }

  .ring-list__item_hover & {
    color: #FFF;
  }
}

.ring-list__title {
  display: block;

  margin-top: 10px;
  margin-bottom: 6px;
  padding: $ring-unit/2 $ring-unit*2 0 $ring-unit*2;
  text-align: left;

  &_first {
    margin-top: 0;
  }

  &-text {
    font-size: 12px;
    color: $ring-dark-gray-color;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
}

.ring-list__fade {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: $ring-unit * 2;

  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.7), #FFF);
}
